<template>
  <div class="realTimePark">
    <div class="park-amount">
      <div class="title realTimeParkTitle"></div>
      <div class="moduleBody">
        <!-- 实时停车数量 -->
        <div class="shouNumber">
          <span class="numberText"> 车位总数量 </span>
          <div class="numContainer" v-if="carShow">
            <span v-for="(item, index) in carNumber?.totalSpaceNum" :key="index">
              <DigitalTransform
                :value="item"
                :interval="800"
                :dislocation="false"
                v-if="index !== 2"
              ></DigitalTransform>
              <span v-else>
                <DigitalTransform
                  :value="item"
                  :interval="800"
                  :dislocation="false"
                ></DigitalTransform>
              </span>
            </span>
            <!-- <DigitalTransform
                :value="carNumber?.totalSpaceNum"
                :interval="1000"
                :dislocation="false"
                v-if="this.carShow"
              ></DigitalTransform> -->
            <span style="color: rgba(255, 255, 255, 0.4); margin-right: 20px"> （单位：个） </span>
          </div>
        </div>
        <!-- 停车状态图示 -->
        <div style="display: flex">
          <div class="carNumCart">
            <div class="carPie" ref="pieChart"></div>
            <div class="carIcon"></div>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              flex-wrap: wrap;
            "
          >
            <span class="lighter blue">
              总空闲车位数量 <span class="numberRate">{{ carNumber?.remainSpaceNum }}</span></span
            >
            <span class="lighter blue">
              实时车位占有率 <span class="numberRate">{{ carNumber?.spaceProportion }}%</span>
            </span>
            <div style="width: 100%">
              <span class="lighter red"
                >总占用车位数量 <span class="numberRate">{{ carNumber?.occupancySpaceNum }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="park-list">
      <!-- 各个区域停车场使用情况 -->
      <img
        class="title areaParkTitle"
        src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E5%90%84%E5%81%9C%E8%BD%A6%E5%8C%BA%E5%9F%9F%E8%BD%A6%E4%BD%8D%E4%BD%BF%E7%94%A8%E6%83%85%E5%86%B5%402x.png"
      />
      <div class="moduleBody parkArea">
        <ProgressCustom :data-list="data.rows"></ProgressCustom>
        <div class="areaParkPagination">
          <a-pagination size="small" :total="data?.total" :pageSize="14" @change="changePage" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import ProgressCustom from '../components/ProgressCustom/index.vue'
import { getParkArea, getCurrentPark } from '@/services/car'
import { Pagination } from 'ant-design-vue'
import DigitalTransform from 'vue-digital-transform'

export default {
  name: 'moduleOne',
  inject: ['carShow'],
  components: {
    ProgressCustom,
    APagination: Pagination,
    DigitalTransform
  },
  data() {
    return {
      carNumber: { a: 4 },
      data: {},
      option: {
        color: ['rgba(117,192,248,1)', 'rgba(255,114,82,1)'],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '车位总数量',
            type: 'pie',
            radius: ['72%', '80%'],
            label: {
              show: false
            },
            data: [
              { value: 1, name: '总空闲车位数量 ' },
              { value: 5, name: '总占用车位数量 ' }
            ]
          }
        ]
      },
      isVisible: false
    }
  },
  mounted() {
    this.getData().then(() => {
      this.initPieChart()
    })
  },
  methods: {
    initPieChart: function () {
      const myCharts = echarts.init(this.$refs.pieChart)
      window.addEventListener('resize', function () {
        myCharts.resize()
      })
      myCharts.setOption(this.option)
    },

    getData: async function () {
      const res = await getParkArea({ page: 1, pageSize: 14 })
      this.data = res
      // 实时停车场数据
      const currentPark = await getCurrentPark()
      let num = currentPark.totalSpaceNum
      let digits = []
      while (num > 0) {
        digits.unshift(num % 10)
        num = Math.floor(num / 10)
      }

      this.carNumber = { ...currentPark, totalSpaceNum: digits }
      this.option = {
        color: ['rgba(117,192,248,1)', 'rgba(255,114,82,1)'],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '车位总数量',
            type: 'pie',
            radius: ['72%', '80%'],
            label: {
              show: false
            },
            tooltip: {
              show: false
            },
            data: [
              { value: currentPark.remainSpaceNum, name: '总空闲车位数量 ' },
              { value: currentPark.occupancySpaceNum, name: '总占用车位数量 ' }
            ]
          }
        ]
      }
    },

    changePage: async function async(page, pageSize) {
      const res = await getParkArea({ page, pageSize })
      this.data = res
    }
  }
}
</script>

<style scoped lang="scss">
.progerssContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10%;
}

.realTimeParkTitle {
  background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E5%81%9C%E8%BD%A6%E5%9C%BA%E5%AE%9E%E6%97%B6%E6%83%85%E5%86%B5%402x.png')
    no-repeat 0 0 / contain;
}

.realTimePark {
  height: 100%;
  display: flex;
  flex-direction: column;
  .carNumCart {
    display: inline-block;
    position: relative;
    margin-right: 40px;
    .carIcon {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E5%81%9C%E8%BD%A6%E5%9C%BAicon%402x.png')
        no-repeat center / contain;
    }
  }
}

.lighter {
  position: relative;
  padding-left: 16px;
}

.lighter::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #f1f8ff;
}

.blue.lighter::before {
  background: #abdcff;
  box-shadow: 0px 0px 6px 4px rgba(0, 133, 255, 0.4);
}
.red.lighter::before {
  background: #ff7252;
  box-shadow: 0px 0px 6px 4px rgba(255, 138, 0, 0.3);
}

.numberRate {
  display: inline-block;
  margin-left: 25px;
  font-size: 16px;
  font-weight: normal;
  color: #ffffff;
}

.parkArea {
  position: relative;
  height: 680px;
}
.areaParkPagination {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.ant-pagination {
  :deep(.ant-pagination-item a) {
    color: #b1ddff;
  }
  :deep(.ant-pagination-item-active a) {
    color: #ffc122;
  }

  :deep(.ant-pagination-item-active) {
    background-color: transparent;
    border: none;
  }
  :deep(.anticon) {
    color: #b1ddff;
  }
}
.park-amount {
  display: flex;
  flex-direction: column;
  height: 256px;
}
.park-list {
  height: 710px;
  // flex-grow: 1;
}
.carPie {
  width: 120px;
  height: 120px;
}
</style>
